<template>
  <!-- 底部图层 -->
  <div class="layer" :style="{ left:left+'px',width:width+'px', height:height+'px',bottom:bottom+'px' }">

  </div>
  <div class="layerMobile" :style="{ left:l+'px',width:w+'px', height:h+'px',bottom:b+'px' }">

  </div>

</template>

<script>

export default {
  components: {},
  props: {
    left: Number,
    width: Number,
    height: Number,
    bottom: Number

  },
  data() {
    return {
      l: 0,
      w: 0,
      h: 0,
      b: 0
    };
  },
  mounted() {
    if (document.body.clientWidth <= 1200) {
      this.l = this.left / 7.5 * (document.body.clientWidth / 100).toFixed(4);
      this.w = this.width / 7.5 * (document.body.clientWidth / 100).toFixed(4);
      this.h = this.height / 7.5 * (document.body.clientWidth / 100).toFixed(4);
      this.b = this.bottom / 7.5 * (document.body.clientWidth / 100).toFixed(4);
    }
  },


  methods: {

  },
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .layerMobile {
    display: none;
  }

  .layer {

    position: absolute;
    background: #eee;



  }
}
</style>
<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .layer {
    display: none;
  }

  .layerMobile {

    position: absolute;
    background: #eee;



  }
}
</style>